<template>
    <div style="overflow: hidden;" :style="style">

        <img v-show="status === 'ok'" src="./default.jpg" :class="myClass" :style="style" @error="handleImageError"
            ref="imageRef" />
        <img v-show="status === 'error'" src="./error.jpg" :class="myClass" :style="style" />
        <!-- <img src="./error.jpg" /> -->
        <img v-show="status === 'noimg'" src="./default.jpg" :class="myClass" :style="style" />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const status = ref('ok')
const imageRef = ref(null)
const props = defineProps({
    'class': {
        type: String,
        default: ''
    },
    'style': {
        type: [String, Object],
        default: ''
    },
    src: {
        type: String,
        required: true,
    },
    isScale: {
        type: Boolean,
        default: false
    }
})

const myClass = computed(() => {
    return props.class + ' ' + (props.isScale ? 'scale' : '')
})

watch(() => props.src, (newSrc) => {
    if (!newSrc)
        status.value = 'noimg'
    else {
        imageRef.value.src = props.src;
    }
}, {
    immediate: false,
    deep: true
})
const url = ref('default.jpg');
const defaultImage = 'default.jpg';
const imageLoaded = ref(false);

const handleImageError = () => {
    status.value = 'error'
};
onMounted(() => {
    setTimeout(() => {
        console.dir(imageRef.value)
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    imageRef.value.src = props.src;
                    observer.disconnect();
                }
            });
        });

        observer.observe(imageRef.value);
    }, 100);
})
</script>

<style>
img {
    display: block;
    width: 100%;
    height: auto;
}

.scale {
    display: block;
    transition: transform 0.5s ease;
}

.scale:hover {
    transform: scale(1.1);
}
</style>